<template>
  <div id="side-bar">
    <div class="categroy">
      <router-link to="/users" active-class="is-active">
        <div class="user">
          <div class="user-img">
            <img src="../../assets/img/user.png" alt="">
            
          </div>
          <span class="userName"><slot>***</slot></span>
        </div>
      </router-link>
      
      <router-link to="/review" active-class="is-active">
        <div class="rem">
          <i class="iconfont">&#xe60a;</i>
          <span>记忆更新</span>
        </div>
      </router-link>
      
      <router-link to="/collect" active-class="is-active">
        <div class="sel">
          <i class="iconfont">&#xe629;</i>
          <span>我的收藏</span>
        </div>
      </router-link>

      <router-link to="/study" active-class="is-active">
        <div class="sty">
          <i class="iconfont">&#xe615;</i>
          <span>学习工厂</span>
        </div>
      </router-link>
      
      <router-link to="/news" active-class="is-active">
        <div class="news">
          <i class="iconfont">&#xe62e;</i>
          <span>新闻资讯</span>
        </div>
      </router-link>

    </div>
    

  </div>
</template>

<script>
  export default {
    
  }
</script>

<style lang="less" scoped>
#side-bar{
  width: 20vw;
  height: 100vh;
  left: 0;
  background-color: #fff;
  box-shadow: 5px 0 10px -5px #ececec;
  // border: 2px solid black;
  // margin-top: 40px;
  font-size: 16px;
  position: fixed;
}
.user{
  padding: 10px;
}
  .user-img {
  margin: 0 auto;
  width: 80px;
  height: 80px;
  border: 5px solid pink;
  img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
}


.categroy {
  padding-top: 40px;
  text-align: center;
}
  .rem{
    margin-top: 50px;
    line-height: 30px;
  }
  .sel{
    margin-top: 20px;
    line-height: 30px;
  }
  .sty{
    margin-top: 20px;
    line-height: 30px;
  }
  .news{
    margin-top: 20px;
    line-height: 30px;
  }

 .is-active div{
  font-weight: 700;
  background-color: rgb(241, 245, 248) !important;
}

i{
  margin-right: 10px;
}
.userName{
  letter-spacing: normal;
}
span{
  letter-spacing: 10px; // 设置横向字体间的间距
}
</style>